<jsp:include page="common.jsp"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login Page</title>
    <style>
        .jumbotron {
            background-color: #007bff; /* 蓝色背景 */
            color: white; /* 白色文字 */
        }

        .form-container {
            max-width: 400px;
            margin: 0 auto;
        }

        .modal-content {
            background-color: #f8f9fa; /* 浅灰色背景 */
        }

        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f1f1f1;
            text-align: center;
            padding: 10px 0;
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .captcha {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .captcha img {
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
    <div class="container">
        <h1 class="display-4">欢迎</h1>
        <p class="lead">请登录或注册以继续</p>
    </div>
</div>

<div class="container form-container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <h2 class="text-center">登录</h2>
            <form id="loginForm" method="post" action="/user">
                <input type="hidden" name="operation" value="login">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" class="form-control" id="loginUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" class="form-control" id="loginPassword" name="password" required>
                </div>
                <div class="form-group captcha">
                    <label for="captchaInput">验证码</label>
                    <div>
                        <input type="text" class="form-control" id="captchaInput" name="captcha" required>
                        <img id="captchaImage" src="#" alt="Captcha" onclick="generateCaptcha()">
                    </div>
                </div>
                <div class="form-group remember-forgot">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" value="on" id="rememberMe" name="rememberMe">
                        <label class="form-check-label" for="rememberMe">记住登录</label>
                    </div>
                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#forgotPasswordModal">
                        忘记密码
                    </button>
                </div>
                <button type="submit" class="btn btn-primary btn-block">登录</button>
                <button type="button" class="btn btn-link btn-block" data-toggle="modal" data-target="#registerModal">
                    注册
                </button>
            </form>
        </div>
    </div>
</div>

<!-- 注册模态框 -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="registerModalLabel">注册</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="registerForm">
                    <div class="form-group">
                        <label for="registerUsername">用户名</label>
                        <input type="text" class="form-control" id="registerUsername" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <input type="password" class="form-control" id="registerPassword" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="registerNickname">昵称</label>
                        <input type="text" class="form-control" id="registerNickname" name="nickname">
                    </div>
                    <div class="form-group">
                        <label for="registerAvatar">头像</label>
                        <input type="text" class="form-control" id="registerAvatar" name="avatar">
                    </div>
                    <div class="form-group">
                        <label for="registerRoleType">角色类型</label>
                        <input type="text" class="form-control" id="registerRoleType" name="roleType">
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">注册</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 忘记密码模态框 -->
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" role="dialog" aria-labelledby="forgotPasswordModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="forgotPasswordModalLabel">重置密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="forgotPasswordForm">
                    <div class="form-group">
                        <label for="resetUsername">用户名</label>
                        <input type="text" class="form-control" id="resetUsername" name="username" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">重置密码</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<div class="footer">
    <p>&copy; 2024 Your Company. All rights reserved.</p>
</div>

<script>
    // 生成随机验证码
    function generateCaptcha() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let captchaText = '';
        for (let i = 0; i < 6; i++) {
            captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        $('#captchaImage').attr('src', 'data:image/svg+xml,' + encodeURIComponent(createCaptchaSVG(captchaText)));
        $('#captchaImage').data('captcha', captchaText);
    }

    // 创建验证码SVG
    function createCaptchaSVG(text) {
        return `
            <svg xmlns="http://www.w3.org/2000/svg" width="160" height="50">
                <rect width="100%" height="100%" fill="white"/>
                <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30" fill="black">
                    ${text}
                </text>
            </svg>
        `;
    }

    // 页面加载时生成初始验证码
    $(document).ready(function () {
        generateCaptcha();
    });

    // 登录表单提交事件处理（忽略大小写比较）
    $('#loginForm').on('submit', function (e) {
        const userInputCaptcha = $('#captchaInput').val().toLowerCase(); // 转换为小写
        const generatedCaptcha = $('#captchaImage').data('captcha').toLowerCase(); // 转换为小写
        if (userInputCaptcha !== generatedCaptcha) {
            e.preventDefault();
            alert('验证码错误，请重试');
            generateCaptcha();
        }
    });


    // 注册表单提交事件处理
    $('#registerForm').on('submit', function (e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: '/user?operation=register',
            type: 'POST',
            data: formData,
            success: function (response) {
                if (response.code === 200) {
                    // 重置表单并关闭模态框
                    $('#registerForm')[0].reset(); // 重置表单
                    // 显示成功信息
                    alert('注册成功');
                } else {
                    alert(response.msg);
                }
            },
            error: function () {
                alert('注册失败，请稍后重试');
            }
        });
    });

    // 忘记密码表单提交事件处理
    $('#forgotPasswordForm').on('submit', function (e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: '/user?operation=resetPassword',
            type: 'POST',
            data: formData,
            success: function (response) {
                if (response.code === 200) {
                    // 重置表单并关闭模态框
                    $('#forgotPasswordForm')[0].reset(); // 重置表单
                    // 显示成功信息
                    alert('密码已重置为000000');
                } else {
                    alert(response.msg);
                }
            },
            error: function () {
                alert('重置密码失败，请稍后重试');
            }
        });
    });

</script>

</body>
</html>

